
//引入node内置模块path == 处理路径
const path = require('path')

//处理html的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

//提取css插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

//压缩css
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

//自动清除dist目录
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

//自动匹配模块
//处理入口文件
const glob = require('glob');
let files = glob.sync('./src/pages/*?/*?.js');
let entry = {}
entry.common='./src/assets/js/common.js'
files.forEach(function (v){
    let i2 = v.lastIndexOf('.')
    let i1 = v.lastIndexOf('/')
    let fileName = v.substring(i1+1, i2)
    entry[fileName] = v; //动态属性访问
})
//   console.log(entry);

//处理html文件
let html = glob.sync('./src/pages/*?/*?.html');

let htmlArr = html.map(function (v){
    let i2 = v.lastIndexOf('.')
    let i1 = v.lastIndexOf('/')
    let fileName = v.substring(i1+1, i2)
    console.log( fileName );
    return new HtmlWebpackPlugin({
        template: v,
        filename: `${fileName}.html`, //出口名字
        chunks: ['common',fileName]
    })
})


//暴露webpack对象
module.exports = {
    //入口entry
    entry: entry,

    //出口output
    output: {
        path: path.resolve(__dirname, 'dist'), //出口路径
        filename: 'js/[name]-[hash:5].js',//输出文件名字
        publicPath: './'
    },

    //加载器loader
    module: {
        rules: [
            //css
            {
                test: /\.css$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                      publicPath: "../",
                    },
                  }, 'css-loader']  //顺序不能换
            },

            //less
            {
                test: /\.less$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                      publicPath: "../",
                    },
                  }, 'css-loader', 'less-loader']
            },

            //背景图片
            {
                test: /\.(jpg|png|gif|jpeg)$/,
                loader: "url-loader",
                options: {
                  name: "[hash:16].[ext]", // 图片输出的名字hash长度16位 默认32位
                  limit: 10 * 1024, // 小于10kb base64处理
                  outputPath: "imgs", //输出路径
                  esModule: false, //关闭es6模块化
                },
                type: "javascript/auto",
            },

            //处理html
            {
                test: /\.html$/, // 处理html中引入img
                loader: "html-loader",
            },

            //字体图标	
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/, // 处理字体格式文件
                type: "asset/resource",
                generator: {
                    filename: "fonts/[name].[hash:6][ext]",
                },
            },

            //编译es6为es5
            {
                test:/\.js$/,
                loader:'babel-loader',// loader 编译es6为es5
                exclude:/node_modules/// 排除
            }

        ]
    },
    
    //插件plugins
    plugins: [
        /* //处理html
        new HtmlWebpackPlugin({
          template: "./src/page/home/home.html", // 把home.html复制到dist中 自动引入资源文件
          filename: "home.html", //出口名字
          chunks: ['home']
        }),

        new HtmlWebpackPlugin({
            template: "./src/page/advert/advert.html",
            filename: "advert.html", //出口名字
            chunks: ['advert']
        }),

        new HtmlWebpackPlugin({
            template: "./src/page/login/login.html",
            filename: "login.html", //出口名字
            chunks: ['login']
        }), */

        // 提取css
        new MiniCssExtractPlugin({
            filename: "css/[name]-[hash:5].css", // 重命名输出的css
        }),
  
        // 压缩css
        new OptimizeCssAssetsWebpackPlugin(),

        // 删除dist目录
        new CleanWebpackPlugin()
    ].concat(htmlArr),

    // 开发服务器 -- 和五大特性同级
    devServer: {
        
        contentBase: path.resolve(__dirname, 'dist'), //启动服务器目录
        publicPath: '/',// 静态资源查找路径
        compress: true,// 启动gzip
        port: 9527,// 端口
        open: true,// 是否在浏览器自动打开
        openPage: ['advert.html']

    },
    target:'web',// 目标是浏览器
   
    //模式mode
    mode: process.env.NODE_ENV //开发模式  生产模式: production
}


